<template>
  <BasicModal
    title="方案名称"
    v-bind="$attrs"
    @register="register"
    @ok="handleSave"
  >
    <BasicForm
      ref="form"
      :schemas="schemas"
      :showResetButton="false"
      :showSubmitButton="false"
    />
  </BasicModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { BasicForm, FormSchema } from '@/components/Form';
import { BasicModal, useModalInner } from '@/components/Modal';
import { add } from '@/api/sys/sysUserQueryManage';
import { useMessage } from '@/hooks/web/useMessage';

const props = defineProps({
  configs: {
    type: Array as PropType<FormSchema[]>,
  },
  tableKey: {
    type: String as PropType<String>,
  },
});
const { createMessage } = useMessage();

const emit = defineEmits(['register', 'success']);
const [register, { closeModal }] = useModalInner(async () => {
  form.value.resetFields();
});
const schemas: FormSchema[] = [
  {
    label: '方案名称',
    component: 'Input',
    field: 'name',
    required: true,
  },
];
const form = ref();
const handleSave = async () => {
  const v = await form.value.validate();
  await add({
    queryConfig: JSON.stringify(props.configs),
    tableKey: props.tableKey,
    queryName: v.name,
  });
  emit('success');
  createMessage.success('保存成功');
  closeModal();
};
</script>
